<template>
  <div class="other-group">
    <h1>女娲微前端管理平台</h1>
    <div class="color-show">
      <img src="../../public/image/weiqianduan.jpg"
           width="700">
    </div>
  </div>
</template>
<!--your.vue-->
<script>
import { reactive, toRefs } from '@vue/reactivity'
import { getCurrentInstance, onMounted } from '@vue/runtime-core'
export default {
  setup() {
    const interInstance = getCurrentInstance()
    // let $dragging = interInstance.appContext.config.globalProperties.$dragging

    let state = reactive({
      colors: [
        { text: 'Aquamarine' },
        { text: 'Hotpink' },
        { text: 'Gold' },
        { text: 'Crimson' },
        { text: 'Blueviolet' },
        { text: 'rgb(0,100,' + Math.random() * 100 + ')' },
      ],
    })

    let VueDragging = vueDrag()

    onMounted(() => {
      // console.log("onmounted", VueDragging)

      VueDragging.$on('dragged', ({ value }) => {
        console.log(value.item)
        console.log(value.list)
      })

      VueDragging.$on('dragend', function (data) {
        console.log('dragend', data)
      })
    })

    return {
      ...toRefs(state),
    }
  },
}
function vueDrag() {
  return getCurrentInstance().appContext.config.globalProperties.$dragging
}
</script>

<style scoped>
.other-group,
.multi-group {
  margin-left: 20px;
  padding: 30px;
  box-sizing: border-box;
}

.color-show {
  display: flex;
  justify-content: center;
}
.color-show:after {
  content: '';
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}
.color-box {
  float: left;
  width: 33%;
  height: 6rem;
  background: #efefef;
  line-height: 6rem;
  text-align: center;
  color: #fff;
  transition: transform 0.3s;
}
.color-box:first-child {
  width: 66%;
  height: 12rem;
}
.color-box.dragging {
  transform: scale(1.1);
}
</style>